<template>
  <div>
      <a-input ref="inputRef"  @focus="handleFocus" readonly="true" v-model="objLocation.address" placeholder="请选择地理位置" style="width: 100%" />
      <a-modal width="69.9%" v-model="visible" title="选择位置" @cancel="handleCancel" @ok="handleOk">
          <MapSearch :location="objLocation" @change="handleChange"></MapSearch>
      </a-modal>
  </div>
</template>

<script>
import MapSearch from '../MapSearch.vue'
export default {
  components:{
      MapSearch
  },
  props:{
      value:{
          type: String,
          default: ""
      },
      lat:{
          type: String,
          default: ""
      },
      lng:{
          type: String,
          default: ""
      }
  },
  data(){
      return {
          visible: false,
          objLocation: {}
      }
  },
  watch:{
      value:{
          handler(newVal){
              this.objLocation.address = newVal;
          },
          deep: true,
          immediate: true
      },
      lat:{
          handler(newVal){
              this.objLocation.lat = newVal;
          },
          deep: true,
          immediate: true
      },
      lng:{
          handler(newVal){
              this.objLocation.lng = newVal;
          },
          deep: true,
          immediate: true
      },
  },
  methods:{
      handleFocus(){
          this.visible = true;
          this.$refs.inputRef.blur();
      },
      handleOk(){
          this.$emit("input", this.objLocation.address);
          this.$emit("update:lat", this.objLocation.lat);
          this.$emit("update:lng", this.objLocation.lng);
          this.visible = false;
      },
      handleCancel(){
          this.visible = false;
      },
      handleChange(item){
          console.log("handleChange:", item);
          this.objLocation = item;
      }
  }
}
</script>

<style scoped lang="less">

</style>